<template>
    <el-select v-model="selectedValue" class="custom-select" :teleported="false" :class="theme" @change="onChange">
        <slot></slot>
        <!-- 默认插槽内容，用户可以自定义选项内容 -->
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            <span>{{ item.label }}</span>
        </el-option>
    </el-select>
</template>

<script setup>
    import { ref, toRefs } from 'vue';

    const props = defineProps({
        modelValue: {
            type: [String, Number],
            default: ''
        },
        theme: {
            type: String,
            default: 'light' // 默认为亮色主题，可以设置为'dark'来使用暗色主题
        },
        options: Array,
    });

    const emits = defineEmits(['update:modelValue']);

    const selectedValue = ref(props.modelValue);
    // selectedValue变化并传递给父组件
    function onChange(event) {
        emits('update:modelValue', selectedValue.value);
    }

    //此处必须用toRefs，否则将失去响应式
    const { options } = toRefs(props);
</script>

<style scoped>
    .custom-select.light {
        /* 亮色主题样式 */
    }

    .custom-select.dark {
        border: var(--main-dark-border) 1px solid;
        border-radius: var(--el-border-radius-base);
    }

    .custom-select.dark :deep(.el-select__wrapper) {
        /* 这里可以覆盖Element Plus的内部样式 */
        background-color: var(--main-dark-bg);
        box-shadow: 0 0 10px 1px var(--main-dark-border) inset;
        color: var(--main-dark-color);
        border-radius: 0;
    }

    .custom-select.dark :deep(.el-select__placeholder), .custom-select.dark :deep(.el-select__caret) {
        color: var(--main-dark-color);
    }

    /* 下拉框样式 */
    .custom-select.dark :deep(.el-select-dropdown){
        background-color: var(--main-dark-bg);
        box-shadow: 0 0 10px 1px var(--main-dark-border) inset;
        color: var(--main-dark-color);
    }
    .custom-select.dark :deep(.el-select__popper.el-popper){
        border: var(--main-dark-border) 1px solid;
    }
    .custom-select.dark :deep(.el-select-dropdown__item){
        color: var(--main-dark-color);
    }
    .custom-select.dark :deep(.el-select-dropdown__item.is-hovering){
        background-color: rgba(40, 76, 223, 0.6);
    }
</style>